<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            width: 150px;
            height: 70px;
            font-size: 70px;
            line-height: 70px;
        }
    </style>
</head>
<body>
    <button id="start">开始</button>
    <button id="pause">结束</button>
    <script>
        //创建构造函数
        function FlyRod (width,height,text,bgURL,left,top,speed){
            //自身的属性
            this.dom = document.createElement("div"),
            this.width = width;
            this.height = height;
            this.text = text;
            this.bgURL = bgURL;
            this.left = left;
            this.top = top;
            this.speed = speed;

            //渲染功能
            FlyRod.prototype.render = function(){
                this.dom.style.width = this.width + "px";
                this.dom.style.height = this.height + "px";
                this.dom.style.position = "absolute";
                this.dom.style.left = this.left + "px";
                this.dom.style.top = this.top + "px";
                this.dom.style.backgroundImage = `url(${this.bgURL})`;
                this.dom.style.backgroundSize = "cover"
                this.dom.innerHTML = this.text;
                this.dom.style.color = "red";
                this.dom.style.textAlign = "center";
                this.dom.style.fontSize = this.height + "px"
                this.dom.style.lineHeight = this.height + "px"
                this.dom.style.backgroundColor = "#357"
            }
            //移动功能
            FlyRod.prototype.move = function(bool){
                this.left += this.speed
                this.dom.style.left = this.left + "px"
                //超宽自动下树功能
                let tmp = true
                if(bool === true){
                    this.width + this.left > innerWidth ? this.dom.remove() : tmp = false
                }
                return tmp
            }
            //上树
            FlyRod.prototype.upTree = function(){
                document.body.appendChild(this.dom)
            }
            //下树
            FlyRod.prototype.downTree = function(){
                this.dom.remove()
            }
            
        } 

        //获取元素
        let start = document.getElementById("start");
        let pause = document.getElementById("pause");

        let onOff = true;//开关
        let arr = [] //存实例
        let timer = null;
        start.onclick = function(){
            if(onOff === true){
                onOff = false;
                let i = 0
                timer = setInterval(() => {
                    i++
                    if(i % 50 === 0){
                        let width = parseInt(Math.random() * 101 + 50)
                        let height = 30
                        let text = "qwertyuiopasdfghjklzxcvbnm"[parseInt(Math.random() * 26)]
                        let bgURL = ""
                        let speed = parseInt(Math.random() * 5 + 1)
                        let top = parseInt(Math.random() * innerHeight - height * 2 + height)
                        let flyRod = new FlyRod(width,height,text,bgURL,0,top,speed)
                        //渲染上树
                        flyRod.render()
                        flyRod.upTree()
                        arr.push(flyRod)
                    }
                    //移动
                    arr.forEach((value,index) => {
                        value.move(true)
                        if(value.move(true)){
                            arr.splice(index,1);
                        }
                    })
                }, 20);
            }
        }
        pause.onclick = function(){
            clearInterval(timer)
            onOff = true
        }
        //键盘事件
        document.onkeydown = function(e){
            let tmp = String.fromCharCode(e.keyCode);
            for(let i = 0; i < arr.length; i++){
                if(tmp.toUpperCase === arr[i].text.toUpperCase){
                    arr[i].downTree();
                    arr.splice(i,1);
                    break//此方法是删除一个 就结束
                    /*
                    i-- 这样防止数组塌陷,继续循环 有同样字母的 ,按下就删除全部同样字母的
                    */
                }
            }
        }
        var obj = {}
        var arr1 = new FlyRod()
        console.log(arr1.constructor);
        console.log(obj);
        var arr2 = []
        console.log();
        
    </script>
</body>
</html>